
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <link rel="shortcut icon" href="favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Cheney" />
    
    <title>MxsDoc</title>
    <link href="css/logo/logo.css" rel="stylesheet">
    <!-- Bootstrap -->
    <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="static/highlight/styles/default.css" rel="stylesheet">
    <link href="static/highlight/styles/zenburn.css" rel="stylesheet">
    <link href="static/zTree/css/metroStyle/metroStyle.css" rel="stylesheet">
    <link href="static/nprogress/nprogress.css" rel="stylesheet">
    <link href="static/styles/kancloud.css" rel="stylesheet">
    <link href="static/bootstrapQ/qiao.css" rel="stylesheet">
    <link href="static/markdown/css/editormd.min.css" rel="stylesheet">
    <link href="static/zTree/css/metroStyle/standardStyle.css" rel="stylesheet" id="zTreeCss">
    

	<!-- FreeTeam CSS-->
	<link rel="stylesheet" href="static/freeTeam/css/resetV2.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="static/freeTeam/css/boot-css/bootstrap.custom.css" type="text/css" media="screen" /> 

	<!-- context.js -->
	<link rel="stylesheet" type="text/css" href="static/ContextJS/css/demo.css">
	<link rel="stylesheet" type="text/css" href="static/ContextJS/css/context.standalone.css">
    <script src="static/scripts/jquery.min.js" type="text/javascript"></script>
    <!-- Include all compiled plugins (below), or include individual file	s as needed -->
	<script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="static/layer/layer.js"></script>
	<script type="text/javascript" src="static/nprogress/nprogress.js"></script>
	<script type="text/javascript" src="static/highlight/highlight.js"></script>
	<script type="text/javascript" src="static/highlight/highlightjs-line-numbers.min.js"></script>
	<script type="text/javascript" src="static/bootstrapQ/qiao.js"></script>
	<script type="application/javascript" src="static/markdown/lib/raphael.min.js"></script>
	<script type="application/javascript" src="static/scripts/jsonEscape.js"></script>
	<!-- For ajax form submit -->
	<script  type="text/javascript" src="static/scripts/jquery.form.js"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <script src="js/DocSys.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/base64.js"></script>
</head>
<body>
<div class="m-manual manual-reader">
    <header class="navbar navbar-static-top manual-head" role="banner">
        <div class="container-fluid">
            <div class="navbar-header pull-left manual-title">
            	<a class="navbar-brand" href="/DocSystem/web/projects.html">
            		<i class="logo small"></i> 
            		MxsDoc
            	</a>
                <span class="slidebar" id="slidebar">
                    <i class="fa fa-align-justify"></i>
                </span>
            </div>

            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul class="nav navbar-nav navbar-left">
                	<div>Gradio测试</div>
            	</ul>
            </nav>
        </div>      
    </header>
    <article class="container-fluid manual-body">
        <div class="manual-right" style="left:0px;overflow-y: auto;">
            <div class="manual-article">
               <div class="article-body editor-content"  id="doc" style="min-height: 650px">
               		<div class="panel-body eventset-list" >	
	               		<li class="eventset-tit" style="margin-top: 0px;">
							<i class="cell w7">名称</i>
							<i class="cell w20">地址</i>
							<i class="cell w15">参数</i>
							<i class="cell w10">结果</i>
							<i class="cell w10">操作</i>						
						</li>
					</div>
               		<div class="panel-body eventset-list">

			 			<li>	
			 				<i class="cell w7">getSessionHash</i> 	
			 				<i class="cell w20">		
			 					<input id="getSessionHashUrl" value="" type="text" style="width:80%">
			 				</i>	
			 				<i class="cell w15">		
			 					<textarea id="getSessionHashParam">
			 					{
			 					}		 					
			 					</textarea>
			 				</i>	
			 				<i class="cell w10">		
			 					<div id="getSessionHashResult"></div>
			 				</i>
			 				<i class="cell w10">
			 					<a href="javascript:void(0)" onclick="getSessionHashTest();" class="mybtn-primary">getSessionHash</a>
			 				</i>
			 			</li>
			 			
			 			<li>	
			 				<i class="cell w7">testPredict</i> 	
			 				<i class="cell w20">		
			 					<input id="predictUrl" value="http://10.183.67.123:8080/run/predict" type="text" style="width:80%">
			 				</i>	
			 				<i class="cell w15">		
			 					<textarea id="predictParam">
			 					{
			 						"data":"Hello",
			 						"fn_index":0,
			 						"session_hash":"45kf5rca5z5",
			 						"trigger_id":1
			 					}		 					
			 					</textarea>
			 				</i>	
			 				<i class="cell w10">		
			 					<textarea id="predictResult"></textarea>
			 				</i>
			 				<i class="cell w10">
			 					<a href="javascript:void(0)" onclick="predictTest();" class="mybtn-primary">testPredict</a>
			 				</i>
			 			</li>
			 			
			 			<li>	
			 				<i class="cell w7">testJoin</i> 	
			 				<i class="cell w20">		
			 					<input id="joinUrl" value="http://10.183.67.123:8080/queue/join?" type="text" style="width:80%">
			 				</i>	
			 				<i class="cell w15">		
			 					<textarea id="joinParam">
			 					{
			 						"fn_index":2,
			 						"session_hash":"45kf5rca5z5",
			 						"trigger_id":1
			 					}		 					
			 					</textarea>
			 				</i>	
			 				<i class="cell w10">		
			 					<textarea id="joinResult"></textarea>
			 				</i>
			 				<i class="cell w10">
			 					<a href="javascript:void(0)" onclick="joinTest();" class="mybtn-primary">testJoin</a>
			 				</i>
			 			</li>
			 			
			 			<li>	
			 				<i class="cell w7">testReceiveData</i> 	
			 				<i class="cell w20">		
			 					<input id="receiveDataUrl" value="http://10.183.67.123:8080/queue/data" type="text" style="width:80%">
			 				</i>	
			 				<i class="cell w15">		
			 					<textarea id="receiveDataParam">
			 					{
			 					}		 					
			 					</textarea>
			 				</i>	
			 				<i class="cell w10">		
			 					<div id="receiveDataResult"></div>
			 				</i>
			 				<i class="cell w10">
			 					<a href="javascript:void(0)" onclick="receiveDataTest();" class="mybtn-primary">testReceiveData</a>
			 				</i>
			 			</li>	
			 			
			 			<li>	
			 				<i class="cell w7">askWithGradio</i> 	
			 				<i class="cell w20">		
			 					<input id="askWithGradioUrl" value="http://10.183.67.123:8080" type="text" style="width:80%">
			 				</i>	
			 				<i class="cell w15">		
			 					<textarea id="askWithGradioParam"></textarea>
			 				</i>	
			 				<i class="cell w10">		
			 					<div id="askWithGradioResult"></div>
			 				</i>
			 				<i class="cell w10">
			 					<a href="javascript:void(0)" onclick="askWithGradio();" class="mybtn-primary">askWithGradio</a>
			 				</i>
			 			</li>		 			
			</div>
        <div class="manual-progress"><b class="progress-bar"></b></div>
    </article>
    <div class="manual-mask"></div>
</div>

<script type="text/javascript">
var gSessionHash = "";

//页面加载完成处理函数    
$(document).ready(function(){
	console.log("Page is ready");
});

function getSessionHashTest()
{		
	gSessionHash = new Date().getTime() + "";
	//$("#getSessionHashResult").val(gSessionHash);
	const div = document.getElementById('getSessionHashResult');
	div.innerHTML = gSessionHash;
}

function predictTest()
{		
	var paramStr = $("#predictParam").val();
	console.log(paramStr);	
	var param = JSON.parse(paramStr);
	console.log(param);
	
	var queryData = {};
	queryData.data = [];
	queryData.data.push(param.data);
	queryData.data_event = null;
	queryData.fn_index = param.fn_index;
	queryData.session_hash = gSessionHash;
	queryData.trigger_id = param.trigger_id;
	
	//发送predict
	var url = $("#predictUrl").val();
	fetch(url, {
	    method: 'POST', // 使用 POST 方法
	    headers: {
	        'Content-Type': 'application/json' // 指定请求头的 Content-Type 为 JSON
	    },
	    body: JSON.stringify(queryData) // 将 JavaScript 对象转换为 JSON 字符串
	})
	.then(response => {
	    if (!response.ok) {
	        throw new Error('Network response was not ok ' + response.statusText);
	    }
	    return response.json(); // 解析 JSON 响应
	})
	.then(data => {
	    console.log(data); // 处理响应数据
    	$("#predictResult").val(JSON.stringify(data));
	})
	.catch(error => {
	    console.error('There has been a problem with your fetch operation:', error);
	});	
}

function joinTest()
{	
	var paramStr = $("#joinParam").val();
	console.log(paramStr);	
	var param = JSON.parse(paramStr);
	console.log(param);
	
	var queryData = {};
	queryData.data = [];
	queryData.data.push(null);
	queryData.data.push(null);
	queryData.data_event = null;
	queryData.fn_index = param.fn_index;
	queryData.session_hash = gSessionHash;
	queryData.trigger_id = param.trigger_id;
	
	//发送predict
	var url = $("#joinUrl").val();
	fetch(url, {
	    method: 'POST', // 使用 POST 方法
	    headers: {
	        'Content-Type': 'application/json' // 指定请求头的 Content-Type 为 JSON
	    },
	    body: JSON.stringify(queryData) // 将 JavaScript 对象转换为 JSON 字符串
	})
	.then(response => {
	    if (!response.ok) {
	        throw new Error('Network response was not ok ' + response.statusText);
	    }
	    return response.json(); // 解析 JSON 响应
	})
	.then(data => {
	    console.log(data); // 处理响应数据
    	$("#joinResult").val(JSON.stringify(data));
	})
	.catch(error => {
	    console.error('There has been a problem with your fetch operation:', error);
	});	
}

function receiveDataTest()
{	
	var paramStr = $("#receiveDataParam").val();
	console.log(paramStr);	
	var param = JSON.parse(paramStr);
	console.log(param);
		
	var url = $("#receiveDataUrl").val() + "?session_hash=" + gSessionHash;
	const textarea = document.getElementById('receiveDataResult');
    
	if (!!window.EventSource) {
	    var eventSource = new EventSource(url);

	    eventSource.addEventListener('message', function(event) {
	        // 处理来自服务器的消息
	        //console.log('Message received:', event.data);
	        // 可以在此处解析消息内容并更新页面内容
	     	const jsonData = JSON.parse(event.data);
	        if(jsonData.output)
	     	{
	     		console.log('Message received:', event.data.output);
		        if(jsonData.output.data)
	     		{
		        	var newData = jsonData.output.data;
		        	console.log('Message received:', newData);      	
		        	if(newData[0])
		        	{
		        		if(newData[0][0])
		        		{
		        			if(newData[0][0][2])
		        			{
		    		        	console.log('Message received:', newData[0][0][2]);
		    		        	// Append the new data to the textarea
		    	                //textarea.value += newData[0][0][2];	
		    	                textarea.innerHTML += newData[0][0][2];
		        			}
		        		}
		        	}
	     		}
	     	}
	    }, false);

	    eventSource.addEventListener('open', function(event) {
	        // 当连接成功建立时执行
	        console.log('Connection to server opened.');
	    }, false);

	    eventSource.addEventListener('error', function(event) {
	        // 当连接发生错误时执行
	        if (event.target.readyState === EventSource.CLOSED) {
	            // 连接已关闭
	            console.log('Connection was closed.');
	        } else if (event.target.readyState === EventSource.CONNECTING) {
	            // 正在重新连接
	            console.log('Reconnecting...');
	        } else {
	            // 连接发生错误
	            console.error('An error occurred:', event);
	        }
	    }, false);

	    // 你还可以添加其他自定义事件处理程序
	    // eventSource.addEventListener('custom-event', function(event) {
	    //     console.log('Custom event received:', event.data);
	    // }, false);
	} else {
	    console.error('Your browser does not support Server-Sent Events.');
	}
}

function askWithGradio()
{
	var question = $("#askWithGradioParam").val();
	if(question == undefined || question == "")
	{	
		alert("请输入您的问题");
		return;
	}
	console.log("askWithGradio() question:", question);
	var serverUrl = $("#askWithGradioUrl").val();
	console.log("askWithGradio() serverUrl:", serverUrl);

	var sessionId = new Date().getTime() + "";
	console.log("askWithGradio() sessionId:", sessionId);

	const displayHtmlElement = document.getElementById('askWithGradioResult');
	
	predict(serverUrl, sessionId, question, displayHtmlElement);
}

function predict(serverUrl, sessionId, question, displayHtmlElement)
{		
	console.log("predict() question:" + question + " sessionId:" + sessionId);
	var queryData = {};
	queryData.data = [];
	queryData.data.push(question);
	queryData.data_event = null;
	queryData.fn_index = 0;
	queryData.session_hash = sessionId;
	queryData.trigger_id = 1;
	
	//发送predict
	var url = serverUrl + "/run/predict";
	fetch(url, {
	    method: 'POST', // 使用 POST 方法
	    headers: {
	        'Content-Type': 'application/json' // 指定请求头的 Content-Type 为 JSON
	    },
	    body: JSON.stringify(queryData) // 将 JavaScript 对象转换为 JSON 字符串
	})
	.then(response => {
	    if (!response.ok) {
	        throw new Error('Network response was not ok ' + response.statusText);
	    }
	    return response.json(); // 解析 JSON 响应
	})
	.then(data => {
	    console.log(data); // 处理响应数据
	    join(serverUrl, sessionId, question, displayHtmlElement);
	})
	.catch(error => {
	    console.error('There has been a problem with your fetch operation:', error);
	});	
}

function join(serverUrl, sessionId, question, displayHtmlElement)
{	
	console.log("join() question:" + question + " sessionId:" + sessionId);
	var queryData = {};
	queryData.data = [];
	queryData.data.push(null);
	queryData.data.push(null);
	queryData.data_event = null;
	queryData.fn_index = 2;
	queryData.session_hash = sessionId;
	queryData.trigger_id = 1;
	
	var url = serverUrl + "/queue/join?";
	fetch(url, {
	    method: 'POST', // 使用 POST 方法
	    headers: {
	        'Content-Type': 'application/json' // 指定请求头的 Content-Type 为 JSON
	    },
	    body: JSON.stringify(queryData) // 将 JavaScript 对象转换为 JSON 字符串
	})
	.then(response => {
	    if (!response.ok) {
	        throw new Error('Network response was not ok ' + response.statusText);
	    }
	    return response.json(); // 解析 JSON 响应
	})
	.then(data => {
	    console.log(data); // 处理响应数据
	    receiveData(serverUrl, sessionId, question, displayHtmlElement);
	})
	.catch(error => {
	    console.error('There has been a problem with your fetch operation:', error);
	});	
}

function receiveData(serverUrl, sessionId, question, displayHtmlElement)
{		
	console.log("receiveData() question:" + question + " sessionId:" + sessionId);

	var url = serverUrl + "/queue/data?session_hash=" + sessionId;
	const textarea = document.getElementById('receiveDataResult');
    
	if (!!window.EventSource) {
	    var eventSource = new EventSource(url);

	    eventSource.addEventListener('message', function(event) {
	        // 处理来自服务器的消息
	        //console.log('Message received:', event.data);
	        // 可以在此处解析消息内容并更新页面内容
	     	const jsonData = JSON.parse(event.data);
	        if(jsonData.output)
	     	{
	     		console.log('Message received:', event.data.output);
		        if(jsonData.output.data)
	     		{
		        	var newData = jsonData.output.data;
		        	console.log('Message received:', newData);      	
		        	if(newData[0])
		        	{
		        		if(newData[0][0])
		        		{
		        			if(newData[0][0][2])
		        			{
		    		        	console.log('Message received:', newData[0][0][2]);
		    	                displayHtmlElement.innerHTML += newData[0][0][2];
		        			}
		        		}
		        	}
	     		}
	     	}
	    }, false);

	    eventSource.addEventListener('open', function(event) {
	        // 当连接成功建立时执行
	        console.log('Connection to server opened.');
	    }, false);

	    eventSource.addEventListener('error', function(event) {
	        // 当连接发生错误时执行
	        if (event.target.readyState === EventSource.CLOSED) {
	            // 连接已关闭
	            console.log('Connection was closed.');
	        } else if (event.target.readyState === EventSource.CONNECTING) {
	            // 正在重新连接
	            console.log('Reconnecting...');
	        } else {
	            // 连接发生错误
	            console.error('An error occurred:', event);
	        }
	    }, false);

	    // 你还可以添加其他自定义事件处理程序
	    // eventSource.addEventListener('custom-event', function(event) {
	    //     console.log('Custom event received:', event.data);
	    // }, false);
	} else {
	    console.error('Your browser does not support Server-Sent Events.');
	}
}

</script>
</body>
</html>